<template>
  <div class="list-model">
    <div class="header">
      <div class="left">
        <span class="label"> 账号 : </span>
        <span class="count">
          {{ userInfo.userName || '-' }}
        </span>
      </div>
      <div class="right">
        <div class="right-item">
          <span class="label"> 总收入 : </span>
          <span class="count">
            ¥ {{ info.incomeTotal }}
            <!-- <span class="unit">
              元
            </span> -->
          </span>
        </div>
        <div class="right-item">
          <span class="label"> 总支出 : </span>
          <span class="count">
            ¥ {{ info.expensesTotal }}
            <!-- <span class="unit">
              元
            </span> -->
          </span>
        </div>
      </div>
    </div>
    <div class="table-box">
      <el-table
        :data="list"
        size="mini"
        style="width: 100%"
      >
        <el-table-column
          prop="billNo"
          label="交易编号"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="交易账号"
          min-width="100"
        > </el-table-column>
        <el-table-column
          prop="billType"
          label="收支类型"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.billType === 0 ? '支出' : '收入' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="tradeType"
          label="交易类型"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.tradeType === 0 ? '消费' : '平台服务' }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="queueName"
          label="交易渠道 "
          min-width="100"
        ></el-table-column> -->
        <el-table-column
          prop="billNumber"
          label="交易金额(元)"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="交易时间"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="orderNo"
          label="关联订单"
          min-width="100"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import { queryTotalList } from '@/conf/home/apis'
  export default {
    name: 'tenement-list',
    data () {
      return {
        list: [],
        info: {},
      }
    },
    props: {
      tenementList: Array,
      pageNo: Number,
      pageSize: Number,
    },
    methods: {
      _edit (row) {
        this.$refs.clacSetting.show(row)
      },
      async _queryTotalList () {
        try {
          const res = await queryTotalList()
          if (res && res.success) {
            this.info = res.data
          }
        } catch (error) {
          console.log('error===>', error)
        }
      },
    },
    computed: {
      ...mapState('user', ['userInfo']),
    },
    watch: {
      tenementList (a) {
        this.list = []
        setTimeout(() => {
          this.list = a
        })
      },
    },
    created () {
      this.list = this.tenementList
      this._queryTotalList()
    },
  }
</script>

<style lang="scss" scoped>
.list-model {
  .label {
    width: 48px;
    height: 20px;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    text-align: LEFT;
    color: #333333;
    line-height: 20px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    .left {
      .count {
        width: 59px;
        height: 20px;
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        text-align: LEFT;
        color: #333333;
        line-height: 20px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .right-item {
        margin-right: 10px;
        .count {
          width: 57px;
          height: 20px;
          font-size: 20px;
          font-family: PingFang SC, PingFang SC-600;
          font-weight: 600;
          text-align: LEFT;
          color: #f7564e;
          line-height: 20px;
          .unit {
            width: 20px;
            height: 20px;
            font-size: 20px;
            font-family: PingFang SC, PingFang SC-600;
            font-weight: 600;
            text-align: LEFT;
            color: #333333;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>
